<template>
<div class="newsBar-box">
  <div class="news-title">
    今日聚焦
    <el-divider></el-divider>
   
      <div class="news-bar-content">
        <el-timeline :reverse="reverse">
          <el-timeline-item
            style="word-break: break-all;"
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="Local(activity.createTime)">
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>
      </div>
   
  </div>

</div>
</template>

<script>
import LocalTime from "@/timeZone";
import axios from "axios";

export default {
  name: "NewsBar",
  data(){
    return{
      reverse: true,
      activities: [
      {
        content: '活动开始',
        timestamp: '2018-04-15'
      },
        {
          content: '项目一',
          timestamp: '2018-04-15'
        },
        {
          content: '项目二xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
          timestamp: '2018-04-15'
        },
        {
          content: '项目三',
          timestamp: '2018-04-15'
        },
        {
          content: '项目四',
          timestamp: '2018-04-15'
        },
        {
          content: '活动结束',
          timestamp: '2018-04-15'
        },
      ]
    }
  },
  methods: {
    initFocus(){
      axios.get('/FinancialRecommend/new/focus')
      .then(response => {
        this.activities = response.data.data
      })
    },
    Local(time){
      return LocalTime(time)
    }
  },
  created() {
    this.initFocus()
  }
}
</script>
<style lang="less" scoped>
.newsBar-box{
  width: 30%;
  height: 500px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
*{
  margin: 0 0;
  padding: 0 0;
  font-family: "钉钉进步体 Regular";
}
.newsBar-box:hover{
  box-shadow:  0 2px 20px 6px rgba(0, 0, 0, 0.12);
}
.news-title{
  font-size: larger;
  font-weight: lighter;
  width: 100%;
  height: 80px;
  padding: 20px;
  box-sizing: border-box;
  //background-color: red;
}
.news-bar-content{
  padding: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
